<ion-header>
  <ion-navbar>
    <ion-buttons right>
      <button class="add-btn" *ngIf="!recipient" clear (click)="openTransferToModal()" ion-button icon-only>
        <span translation>Add Contact</span>
      </button>
    </ion-buttons>
    <ion-title class="bp-title">
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{ 'Select inputs' | translate }}
      </div>
    </ion-title>
  </ion-navbar>
  <div *ngIf="inputs && inputs.length > 5" class="item-divider-exp-header">
    <div class="header-data" [reveal-at-scroll-pos]="(expandableHeader.headerHeight + 270)" [scrollArea]="scrollArea" *ngIf="recipient">{{ 'Total selected inputs: ' | translate}} {{totalAmount}} {{wallet.coin | uppercase}}</div>
    <div class="header-data" [reveal-at-scroll-pos]="(expandableHeader.headerHeight + 270)" [scrollArea]="scrollArea" *ngIf="recipient && recipient.amountToShow && totalAmount >= recipient.amountToShow">{{ 'Specified amount: ' | translate}} {{recipient.amountToShow}} {{wallet.coin | uppercase}}</div>
    <div class="header-data-warning" [reveal-at-scroll-pos]="(expandableHeader.headerHeight + 270)" [scrollArea]="scrollArea" *ngIf="recipient && recipient.amountToShow && totalAmount < recipient.amountToShow">
      <small>{{'This amount must be at least:' | translate}} {{ recipient.amountToShow }} {{wallet.coin | uppercase}}</small>
    </div>
  </div>
</ion-header>

<ion-content #scrollArea [ngClass]="{'add-padding-bottom': isCordova}">
  <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
    <ion-toolbar class="wide-header__title">
      <expandable-header-primary>
        {{ 'Select inputs' | translate }}
      </expandable-header-primary>
    </ion-toolbar>
  </expandable-header>
    <div>
      <div class="send-header-wrapper" *ngIf="!recipient">
        <ion-item class="search-wrapper" [ngClass]="{'invalid': invalidAddress && search != ''}">
          <ion-input placeholder="{{'Enter {coinName} address' | translate: {coinName: getCoinName(wallet?.coin)} }}" [(ngModel)]="search" (ngModelChange)="processInput()"></ion-input>
          <ion-icon *ngIf="invalidAddress && search != ''" item-end class="backspace-icon" name="backspace" (click)="search = ''"></ion-icon>
          <ion-icon *ngIf="isCordova" item-end class="scan-icon" (click)="openScanner()">
            <img src="assets/img/scan-ico.svg">
          </ion-icon>
        </ion-item>
      </div>

      <ion-list *ngIf="recipient" class="content-list">
        <ion-item-divider class="item-divider-header">
          <span class="ellipsis">{{ 'Recipient' | translate}}</span>
          <button ion-button item-end clear (click)="clearAmount(recipient)">
            <ion-icon name="md-trash" color="grey"></ion-icon>
          </button>
          <button ion-button item-end clear (click)="removeRecipient()">
            <ion-icon name="ios-close-outline" color="grey"></ion-icon>
          </button>
        </ion-item-divider>
        <ion-item (click)="openAmountModal(recipient)" class="recipient">
          <ion-icon class="item-img wallet" item-start>
            <img *ngIf="recipient.recipientType == 'wallet'" [ngClass]="{ testnet: wallet.network === 'testnet' }" class="icon-wallet" src="assets/img/currencies/{{wallet.coin}}.svg" />
            <gravatar *ngIf="recipient.recipientType == 'contact'" [name]="recipient.name" [height]="40" [width]="40" [email]="recipient.email" [coin]="wallet.coin" [network]="wallet.network"></gravatar>
            <img *ngIf="recipient.recipientType == 'address'" class="coin-icon" src="assets/img/icon-{{wallet.coin}}-small.svg" alt="Coin" />
          </ion-icon>
          <ion-label>
            <span *ngIf="recipient.recipientType == 'wallet'">{{recipient.name}}</span>
            <span *ngIf="recipient.recipientType == 'contact'">{{recipient.name}}</span>
            <span *ngIf="recipient.recipientType == 'address'" class="ellipsis">{{recipient.toAddress | shortenedAddress}}</span>
          </ion-label>
          <ion-note item-end text-end>
            <div *ngIf="recipient.amountToShow" class="amount">
              {{recipient.amountToShow}} {{wallet.coin | uppercase}}
            </div>
            <div *ngIf="recipient.amountToShow" class="amount-str">
              {{recipient.altAmountStr}}
            </div>
            <span *ngIf="!recipient.amountToShow" ion-text color="primary">{{'Specify Amount' | translate}}</span>
          </ion-note>
        </ion-item>
      </ion-list>

      <ion-list *ngIf="recipient" class="content-list">
        <ion-item-divider class="item-divider-header">
          <span class="ellipsis">{{ 'Total selected inputs' | translate}}</span>
        </ion-item-divider>
        <ion-item class="total-inputs-content">
          <div class="total-inputs-str">
            {{totalAmount}} {{wallet.coin | uppercase}}
          </div>
          <div class="total-inputs-warning" *ngIf="recipient.amountToShow && totalAmount < recipient.amountToShow">
            <small>{{'The sum of the selected amounts must be at least:' | translate}} {{ recipient.amountToShow }} {{wallet.coin | uppercase}}</small>
          </div>
        </ion-item>
      </ion-list>

      <ion-list *ngIf="recipient" class="content-list">
        <ion-item-divider sticky class="item-divider-header">
          <span class="ellipsis">{{ 'Wallet Inputs' | translate}}</span>
          <button ion-button item-end clear (click)="reverseInputs()">
            <ion-icon *ngIf="!reverse" name="ios-arrow-round-down" color="grey"></ion-icon>
            <ion-icon *ngIf="reverse" name="ios-arrow-round-up" color="grey"></ion-icon>
          </button>
          <button ion-button item-end clear *ngIf="inputs.length > 0" (click)="shortcuts(false)">
            <ion-icon name="md-trash" color="grey"></ion-icon>
          </button>
          <button ion-button item-end clear *ngIf="inputs.length > 0" (click)="shortcuts(true)">
            <ion-icon name="ios-checkmark-circle" color="grey"></ion-icon>
          </button>
        </ion-item-divider>
        <ion-item *ngIf="inputs.length == 0">
          <div class="warning">
            <small>{{'No available inputs.' | translate}}</small>
          </div>
        </ion-item>
        <div class="item-wrapper" *ngFor="let input of inputs; let i = index">
          <ion-item (click)="selectInput(input, i)">
            <ion-label padding-left>
              <div class="amount">
                {{input.amount}} {{wallet.coin | uppercase}}
              </div>
              <div class="address">
                {{input.address}}
              </div>
            </ion-label>
            <ion-checkbox mode="ios" (click)="selectInput(input, i)" [checked]="input.checked"></ion-checkbox>
          </ion-item>
        </div>
      </ion-list>
    </div>
    <div *ngIf="!recipient" class="no-wallet-message">
      <span translate>To get started, you'll need to enter a valid address or select an existent contact or wallet.</span>
    </div>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <button ion-button full class="button-footer" (click)="goToConfirm()" [disabled]="canContinue()">{{'Continue' | translate}}</button>
  </ion-toolbar>
</ion-footer>